<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){

            //给全选按钮绑定事件
            $("#all").click(function(){
                // console.log($("#all").prop("checked"));//布尔值
                // if($("#all").prop("checked")){
                //     $("tbody input").prop("checked",true);
                // }else{
                //     $("tbody input").prop("checked",false);
                // }

                $("tbody input").prop("checked",$("#all").prop("checked"));
            });

            //给tbody中的复选框分别绑定事件
            $("tbody input").click(function(){
                // console.log($("tbody input:checked").length);//获取tbody中的复选框被选中的个数

                if($("tbody input:checked").length==$("tbody input").length){
                    $("#all").prop("checked",true);
                }else{
                    $("#all").prop("checked",false);
                }
            });
        });
    </script>
</head>
<body>
    <table border="1" width="600">
        <thead>
            <tr>
                <th><input type="checkbox" id="all">全选</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
                <th>th05</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
        </tbody>
    </table>
</body>
</html>